<template>
  <div class="light-container">
    <div class="light-wrap">
    <el-tabs v-model="activename" type="border-card">
        <el-tab-pane name="first" label="智慧楼">
          <el-tabs v-model="testdeviceactivename" type="card" tab-position="left">
            <el-tab-pane v-for="(ite, idx) in area_list" :key="idx" :label="ite.area_name" :name="ite.area_name" style="min-height: 400px;">
              <div class="light-room-switch">
                <template v-for="(scene, index) in scene_list">
                  <el-button :key="index" type="primary" @click="handleClickOpen(scene)">{{scene.area_two_name && toGB2312(scene.area_two_name) || '情景模式' }}-{{ scene.scene_name && toGB2312(scene.scene_name)}}</el-button>
                </template>
              </div>
              <div class="light-floor-wrap">
                <el-row :gutter="20">
                  <el-col
                    v-for="(light, lidx) in ite.childlist"
                    :key="lidx"
                    :xs="24"
                    :sm="12"
                    :md="6"
                    :lg="4"
                    :xl="4"
                  >
                    <el-card
                      shadow="hover"
                      :class="
                        light.area_lock_flag == 'on'
                          ? backgroundColor[0] : backgroundColor[1]
                      "
                    >
                      <div slot="header" class="header">
                        <span>{{ toGB2312(light.area_name) }}</span>
                      </div>
                      <div style="width: 100%;">
                        <div class="light-room">
                          <div class="light-room-item">
                            <span>主控开关</span>
                            <el-button type="primary" plain @click="handleRoomOpen(light, 'on')">开灯</el-button>
                            <el-button type="danger" plain @click="handleRoomOpen(light, 'off')">关灯</el-button>
                          </div>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
  import { getIotControl } from "@/api/bedList";
  import { mapGetters } from "vuex"
  import { getTestscene, getTestarea, testRoomcontrol, testDeviceonoff, testExecute } from "@/api/ysxroom";
  import mixins from '@/utils/mixins.js';
  export default {
    name: "LightManage",
    mixins: [mixins],
    data() {
      return {
        backgroundColor: ["colorType0", "colorType2"],
        webSocket: null,
        activename: "first",
        pageDataList: [],
      };
    },
    computed: {
      ...mapGetters({
        adminType: "user/type",
      }),
    },
    created() {
      
    },
    beforeDestroy() {},
    mounted() {
      // getIotControl().then(() => {
      //   if(typeof(WebSocket) === "undefined"){
	    //     alert("您的浏览器不支持WebSocket")
	    //     return false
	    //   }
      //   this.init();
      //   getTestscene("get");
      //   getTestarea("get");
      // })
    },
    destroyed() {
      
    },
    methods: {
      toGB2312(str) {
        return unescape(str.replace(/u/gi, '\\u').replace(/\\u/gi, '%u'));
      },
      // init() {
      //   this.sendMsg("发送数据", res => {
      //     let data = eval("(" + res.data + ")");
      //     console.log('data', data)
      //     if(data.method == "scene_list") {
      //       this.scene_list = data.list;
      //     }
      //     if(data.method == "area_list") {
      //       this.area_list = data.list;
      //       this.testdeviceactivename = data.list[0].area_name;
      //     }
      //   })
      // },
      handleClickOpen(scene) {
        testExecute('get',{
          code: scene.scene_id
        })
      },
      handleRoomOpen(light, onoff) {
        testRoomcontrol('get',{
          parent_id: light.parent_id,
          area_id: light.area_id,
          onoff
        })
      }
    },
  };
</script>
<style lang="scss" scoped>
  .light-container{
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px;
    margin: 0;
    background: #fff;
    .dialog-main {
      .table-do {
        margin-bottom: 15px;
      }

      ::v-deep {
        th {
          .cell {
            color: #fff;
          }
        }
      }
    }
    .light-wrap{
      padding: 30px;
      border: 1px solid #e4e7ed;
    }
    .light-room-switch{
      box-sizing: border-box;
      button{
        margin: 0 5px 10px;
      }
    }
   .light-floor-wrap{
     margin-bottom: 10px;
     .el-card.colorType0 {
       ::v-deep {
         .el-card__header {
           background: #18ba39;
         }
       }
     }
     .el-card.colorType2 {
       ::v-deep {
         .el-card__header {
           background: #999;
         }
       }
     }
     .el-card {
       cursor: pointer;
       border-radius: 4px;

       ::v-deep {
         .el-card__header {
           height: 44x;
           padding: 0 12px;
           line-height: 44px;
           background: #18ba39;
         }

         .el-card__body {
           box-sizing: border-box;
           padding: 12px;

           .num,
           .type,
           .price {
             margin-bottom: 12px;
             font-size: 16px;
             line-height: 24px;
             color: #333;
           }

           .price {
             color: #ff4d50;
           }

           .status {
             display: flex;
             line-height: 24px;

             span {
               flex: 1;
               color: #1791ff;
             }
           }
         }
       }
     }

     .header {
       position: relative;
       display: flex;
       align-items: center;
       color: #fff;
       .light_button{
         padding: 5px 6px;
       }
        
       span {
         flex: 1;
         font-size: 18px;
         text-align: center;

         &:first-child {
           text-align: left;
         }

         i {
           font-size: 12px;
           font-style: normal;
           color: rgba($color: #fff, $alpha: 0.5);
         }
       }
     }
     .light-room{
        .light-room-item{
          margin-top: 10px;
          span{
            display: inline-block;
            width: 100px;
          }
        }
     }
   }
  }
</style>
